<template>
  <el-container>
    <el-header>
      <strong>Vue后台管理系统</strong>
      <div class="header-avatar">
        <el-avatar :src="userInfo.avatar"></el-avatar>

        <el-dropdown>
        <span class="el-dropdown-link">
          {{ userInfo.username }}<i class="el-icon-arrow-down el-icon--right"></i>
        </span>
          <el-dropdown-menu slot="dropdown">
            <router-link to="/sys/person">
              <el-dropdown-item @click.native="addTabs({title:'个人中心',name:'Person'})">个人中心</el-dropdown-item>
            </router-link>
<!--            下拉框中不能直接@click响应函数，应该用@click.native-->
            <el-dropdown-item @click.native="logout">退出</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
        <!--    target="_blank"浏览器总是打开新的窗口显示链接地址    -->
        <!--    :underline="false"去掉链接文字的下划线  -->
        <el-link href="https://blog.csdn.net/weixin_43424325?spm=1001.2101.3001.5343" target="_blank"  :underline="false">博客</el-link>
        <el-link href="https://www.zhihu.com/people/mmc-16-81" target="_blank" :underline="false">知乎</el-link>
      </div>
    </el-header>
    <el-main>
<!--      标签页-->
      <el-tabs v-model="editableTabsValue" type="card" closable @tab-remove="removeTab" @tab-click="selectTab">
        <el-tab-pane
            v-for="(item, index) in editableTabs"
            :key="item.name"
            :label="item.title"
            :name="item.name"
        >
<!--          {{item.content}}-->
        </el-tab-pane>
      </el-tabs>
      <div style="margin: 0 10px">
        <router-view></router-view>
      </div>
    </el-main>
  </el-container>
</template>

<script>

import router from "../router";

export default {
  name: "Header",
  data(){
    return {
      userInfo: {
        id: "",
        username: "",
        avatar: "",
      },
    }
  },
  //动态监测变量值
  computed:{
    editableTabsValue: {
      get(){
        return this.$store.state.menus.editableTabsValue;
      },
      set(val){
        this.$store.state.menus.editableTabsValue = val;
      }
    },
    editableTabs:{
      get(){
        return this.$store.state.menus.editableTabs;
      },
      set(val){
        this.$store.state.menus.editableTabs = val;
      }
    }
  },
  methods:{
    //点击个人中心添加个人中心标签页
    addTabs(item){
      this.$store.commit("addTab",item)
    },
    logout(){
      this.$axios.post('/logout').then(res => {
        //清除本地用户信息
        localStorage.clear()
        sessionStorage.clear()
        //清除store中token信息
        this.$store.commit("resetState");
        //清除store中的标签页信息
        this.$store.commit("resetEditableTabs")
        this.$store.commit("resetEditableTabsValue")
        router.push('/login')
      })
    },
    //删除标签页
    //targetName表示当前标签页的name
    removeTab(targetName) {
      //首页是我们的默认标签页，所以不能删除
      if(targetName === '/index'){
        return
      }
      let tabs = this.editableTabs;
      let activeName = this.editableTabsValue;
      if (activeName === targetName) {
        tabs.forEach((tab, index) => {
          if (tab.name === targetName) {
            let nextTab = tabs[index + 1] || tabs[index - 1];
            if (nextTab) {
              activeName = nextTab.name;
            }
          }
        });
      }

      this.editableTabsValue = activeName;
      this.editableTabs = tabs.filter(tab => tab.name !== targetName);
      // if(this.editableTabs.length===0){
      //   this.editableTabs.push({
      //     title: '首页',
      //     name: '/index'
      //   })
      //   this.editableTabsValue = '首页'
      // }

      this.$router.push({name:this.editableTabsValue})
    },
    //点击某个标签页实现路由跳转
    selectTab(target){
      //新知识点
      //this.$router.push()不仅可以通过path跳转,还可以通过name跳转
      this.$router.push({name:target.name}).catch(err => {
        console.log(err)
      })
    },
    //获取用户信息
    getUserInfo(){
      this.$axios.get("/sys/userInfo").then(res => {
        console.log("userInfo")
        console.log(res)
        this.userInfo = res.data.data;
      })
    },
  },
  created() {
    this.getUserInfo();
  }
}
</script>

<style scoped>
.el-container {
  margin: 0;
  padding: 0;
  height: 100vh;
}
.el-main {
  background-color: #E9EEF3;
  color: #333;
  padding: 0;
  /*line-height: 160px;*/
}
.header-avatar{
  float: right;
  width: 200px;
  display: flex;
  align-items: center;
  justify-content: space-around;
}
.el-header{
  background-color: #17B3A3;
  color: #333;
  text-align: center;
  /*定义行高，通过调整数值实现垂直居中*/
  line-height: 60px;
}
.el-dropdown-link {
  cursor: pointer;
  color: black;
  font-family: "Times New Roman";
}
.el-icon-arrow-down {
  font-size: 12px;
}
a {
  text-decoration: none;
}

.router-link-active {
  text-decoration: none;
}
</style>